<#-- 引入布局指令的命名空间 -->
<#import "/layout/defaultLayout.ftl" as defaultLayout>
<#--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->

<#-- 调用布局指令 -->
<@defaultLayout.layout>

<#-- 将下面这个main content嵌入到layout指令的nested块中 -->

<style>
    #preLoadingRate {
        display: flex;
        justify-content: center;
    }

    .box-card {
        margin: 30px;
        width: 80%;
        min-height: 800px;
    }
</style>
<div id="preLoadingRate">
    <el-card class="box-card">
        <el-upload style="text-align: center"
                   class="upload-demo"
                   drag
                   action="/preLoadingRate/uploadExcelFile.htm"
                   :limit="1"
                   :on-exceed="handleExceed"
                   :on-preview="handlePreview"
                   :on-success="handleSuccess"
                   :on-error="handleError"
                   multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传Excel文件</div>
        </el-upload>
        <div v-show="showGaosiInput" style="border-radius: 8px;border: 1px #409EFF solid; padding: 8px;margin: 10px">
            <div style="font-size: medium">请输入对应高斯值(
                <el-link href="/preLoadingRate/downloadTempExcelFile.htm" target="_blank" type="primary">点击下载临时数据
                </el-link>
                )：
            </div>
            <br>
            <ul>
                <template v-for="item in sheetInfo">
                    第{{ item.sheetNo }}页，页名称为{{ item.sheetName }}，其高斯值为:
                    <el-input v-model="item.gaoSiVal" size="small" placeholder="请输入高斯值"
                              style="width:380px;max-width: 60%"></el-input>
                    <br>
                    <br>
                </template>

            <#--<el-link href="/preLoadingRate/downloadResultExcelFile.htm" target="_blank" type="success">提交</el-link>-->
                <el-button v-on:click="submitGaisiVal" type="primary">提交</el-button>
            </ul>
        </div>
    </el-card>

    <el-dialog
            title="提示"
            :visible.sync="dowloadResultExceldialogVisible"
            width="30%"
            :before-close="handleClose">
        <span>处理完毕，下载最终结果</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="downloadResultExcelFile()">确定下载</el-button>
        </span>
    </el-dialog>

</div>

<script>
    var preLoadingRate = new Vue({
        el: '#preLoadingRate',
        data: function () {
            return {
                sheetInfo: [],
                showGaosiInput: false,
                dowloadResultExceldialogVisible:false
            };
        },
        methods: {
            handleExceed: function () {
                this.$alert('一次只能处理一个文件', '提示', {
                    confirmButtonText: '确定',
                });
            },
            handlePreview: function (file) {
                console.log("handlePreview")
                console.log(file)
            },
            handleSuccess: function (res, file) {
                var _this = this;
                console.log("handleSuccess")
                console.log(res)
                if (res.respCode != "0000") {
                    // 失败
                    this.$alert(res.respMsg, '失败', {
                        confirmButtonText: '确定',
                    });
                } else {
                    // 成功
                    _this.sheetInfo = res.sheetInfo;
                }

                console.log("handleSuccess end")
            },
            handleError: function (err, file, fileList) {
                console.log("handleError")
                console.log(err, file, fileList)
                console.log("handleError end")
            },
            submitGaisiVal: function () {
                var _this = this;
                axios({
                    method: 'post',
                    url: '/preLoadingRate/submitGaisiVal.htm',
                    data: {
                        sheetInfo:JSON.stringify(_this.sheetInfo)
                    }
                }).then(function (response) {
                    console.log(response.data);
                    if ("0000" === response.data.responseCode) {
                        _this.dowloadResultExceldialogVisible=true;
                    } else {
                        this.$alert(response.data.responseMsg, '修改失败', {
                            confirmButtonText: '确定',
                        });
                    }

                });
            },
            downloadResultExcelFile:function () {
                window.open("/preLoadingRate/downloadResultExcelFile.htm", "about:blank")
                this.dowloadResultExceldialogVisible = false;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                        .then(_ => {
                    done();
            })
            .catch(_ => {});
            }
        },
        watch: {
            //sheetNum发生改变时，这个函数就会被运行
            sheetInfo: function (newSheetInfo, oldSheetInfo) {
//                console.log(newSheetInfo, oldSheetInfo)
                this.showGaosiInput = newSheetInfo.length > 0;
            }
        },
        mounted: function () {

        },

    })
</script>

</@defaultLayout.layout>
